<template>
  <div class="box">
    <header class="header">
      <van-nav-bar
        :title="titletxt"
        right-text="确认"
        left-arrow
        @click-left="$router.go(-1)"
        @click-right="onClickRight"
      />
    </header>
    <div class="content">
      <van-swipe class="my-swipe" duration="800" :show-indicators="false" :initial-swipe="initPage" :loop="false" @change="onChangPage">
        <van-swipe-item v-for="(item, index) in post_image_list" :key="index" >
          <img v-lazy="item.img" class="my-swipe-img" />
          <!-- 品牌 -->
          <span class="tag-itm brand-tag" :style="item.brandTagLocation" v-drag v-if="item.brandTag">
            <i class="yuan"></i>
            <i class="line"></i>
            <b class="pinpai-bg"> {{ item.brandTag }} </b>
          </span>
          <!-- 地点 -->
          <span class="tag-itm site-tag" :style="item.siteTagLocation" v-drag v-if="item.siteTag">
            <i class="yuan"></i>
            <i class="line"></i>
            <b class="didian-bg"> {{ item.siteTag }} </b>
          </span>
          <!-- 自定义 -->
          <span class="tag-itm diy-tag" :style="item.diyTagLocation" v-drag v-if="item.diyTag">
            <i class="yuan"></i>
            <i class="line"></i>
            <b class="zidingyi-bg"> {{ item.diyTag }} </b>
          </span>
        </van-swipe-item>
      </van-swipe>
      <!-- 添加标签 -->
      <div class="addpreview" @click="isTagShow = true">
        <i></i>
        <span>添加标签</span>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="mask" v-show="isTagShow" @click="isTagShow = false">
      <div class="tb-item">
        <i class="pinpai" @click="goAddTag('addBrandTag')"></i>
        <span>品牌</span>
      </div>
      <div class="tb-item">
        <i class="didian" @click="goAddTag('addAddressTag')"></i>
        <span>地点</span>
      </div>
      <div class="tb-item">
        <i class="zidingyi" @click="goAddTag('addCustomizeTag')"></i>
        <span>自定义</span>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { NavBar, Swipe, SwipeItem, Lazyload } from 'vant'
import { mapState, mapActions } from 'vuex'
import Bus from '@/utils/bus.js'

Vue.use(NavBar)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Lazyload)

const location = {
  site_tag_location: 'left: 1.65rem; top: 1.8rem;',
  brand_tag_location: 'left: 1.97rem; top: 0.9rem;',
  dir_tag_location: 'left: 2rem; top: 2.6rem;'
}

export default {
  computed: {
    ...mapState({
      post_image_list: ({ sendPost }) => sendPost.post_image_list
    })
  },
  data () {
    return {
      isTagShow: false,
      titletxt: '',
      initPage: 0
    }
  },
  methods: {
    ...mapActions('sendPost', ['uploadImg']),
    goAddTag (routeName) {
      this.$router.push({ name: routeName })
    },
    onChangPage (index) {
      this.initPage = index
      this.titletxt = `${index + 1}/${this.post_image_list.length}`
    },
    onClickRight () {
      this.$store.dispatch('sendPost/uploadImg', { imgList: [...this.post_image_list] })
      this.$router.go(-1)
    }
  },
  activated () {
    this.titletxt = `${this.initPage + 1}/${this.post_image_list.length}`
    Bus.$on('addrTag', function (data) {
      if (this.post_image_list.length > 0) this.post_image_list[this.initPage].siteTag = data
    }.bind(this))
    Bus.$on('brandTag', function (data) {
      if (this.post_image_list.length > 0) this.post_image_list[this.initPage].brandTag = data
    }.bind(this))
    Bus.$on('custTag', function (data) {
      if (this.post_image_list.length > 0) this.post_image_list[this.initPage].diyTag = data
    }.bind(this))
  },
  mounted () {
    this.titletxt = `${this.initPage + 1}/${this.post_image_list.length}`
  },
  directives: {
    drag (el, bindings) {
      el.ontouchstart = function (e) {
        const disx = e.targetTouches[0].clientX - el.offsetLeft
        const disy = e.targetTouches[0].clientY - el.offsetTop
        document.ontouchmove = function (e) {
          const left = e.targetTouches[0].clientX - disx <= 0 ? 0 : e.targetTouches[0].clientX - disx >= 370 - el.offsetWidth ? 370 - el.offsetWidth : e.targetTouches[0].clientX - disx
          const top = e.targetTouches[0].clientY - disy <= 0 ? 0 : e.targetTouches[0].clientY - disy >= 500 - el.offsetHeight ? 500 - el.offsetHeight : e.targetTouches[0].clientY - disy
          el.style.left = left / 100 + 'rem'
          el.style.top = top / 100 + 'rem'
          // tags[page].
          const elClass = el.className.split(' ')[1]
          if (elClass === 'brand-tag') {
            location.brand_tag_location = `${left / 100} + rem;${top / 100} + rem;`
          } else if (elClass === 'site-tag') {
            location.site_tag_location = `${left / 100} + rem;${top / 100} + rem;`
          } else location.dir_tag_location = `${left / 100} + rem;${top / 100} + rem;`
        }
        document.ontouchend = function () {
          document.onmousemove = document.onmouseup = null
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/assets/css/community/preview.scss';
</style>
